import React, { useState, useEffect } from 'react'
import styles from './panel.module.css';


import avatarimg1 from '../avatars/1.png'
import avatarimg2 from '../avatars/2.png'
import avatarimg3 from '../avatars/3.png'
import avatarimg4 from '../avatars/4.png'
import avatarimg5 from '../avatars/5.png'
import avatarimg6 from '../avatars/6.png'

import wechat from '../avatars/wechat.png'
import qq from '../avatars/qq.png'
import weibo from '../avatars/weibo.png'
import tiktok from '../avatars/tiktok.png'



export default function panel() {
    const yqimg = [
        { src: avatarimg1, alt: '头像' },
        { src: avatarimg2, alt: '头像' },
        { src: avatarimg3, alt: '头像' },
        { src: avatarimg4, alt: '头像' },
        { src: avatarimg5, alt: '头像' },
        { src: avatarimg6, alt: '头像' },
        { src: avatarimg2, alt: '头像' },
        { src: avatarimg5, alt: '头像' },
        { src: wechat, alt: '微信' },
        { src: qq, alt: 'QQ' },
        { src: weibo, alt: '微博' },
        { src: tiktok, alt: '抖音' },
    ];
    // 假设从存储中获取的数据
    const storageData = {
        used: 65,
        total: 100,
        files: [
            {
                type: 'file',
                size: '11 GB',
                lastUpdate: '2023.11.17 11:11'
            },
            {
                type: 'image',
                size: '21 GB',
                lastUpdate: '2023.11.17 11:11'
            },
            {
                type: 'video',
                size: '21 GB',
                lastUpdate: '2023.11.17 11:11'
            },
            {
                type: 'other',
                size: '21 GB',
                lastUpdate: '2023.11.17 11:11'
            }
        ],
        contacts: [
            { name: '张宇航', email: 'johndoe1234@gmail.com', avatar: avatarimg1 },
            { name: '李心怡', email: 'emily.smith567@yahoo.com', avatar: avatarimg2 },
            { name: '王明阳', email: 'alex.wang@hotmail.com', avatar: avatarimg3 },
            { name: '赵佳琪', email: 'sarah.jones789@outlook.com', avatar: avatarimg4 },
            { name: '刘晨辰', email: 'mikebrown12@gmail.com', avatar: avatarimg5 },
            { name: '郑娟婷', email: 'ohnson456@yahoo.com', avatar: avatarimg6 }
        ]
    };

    const [selectedTab, setSelectedTab] = useState('file');


    return (
        <>
            <main className={styles.main}>


                <section className={styles.storageSection}>
                    <div className={styles.storageCard}>
                        <h3>可用存储空间</h3>
                        <div className={styles.storageInfo}>
                            <div className={styles.progressRing}>
                                <svg viewBox="0 0 36 36">
                                    <path
                                        d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                        fill="none"
                                        stroke="#E5E7EB"
                                        strokeWidth="2"
                                    />
                                    <path
                                        d="M18 2.0845
                                a 15.9155 15.9155 0 0 1 0 31.831
                                a 15.9155 15.9155 0 0 1 0 -31.831"
                                        fill="none"
                                        stroke="#6B7AFF"
                                        strokeWidth="2"
                                        strokeDasharray={`${storageData.used}, 100`}
                                    />
                                </svg>
                                <div className={styles.percentage}>{storageData.used}%</div>
                            </div>
                            <div className={styles.storageText}>
                                {storageData.used}GB / {storageData.total}GB
                            </div>
                        </div>
                    </div>
                    <div className={styles.storageGrid}>
                        {storageData.files.map((file, index) => (
                            <div key={index} className={styles.storageItem}>
                                <div className={styles.itemIcon}>
                                    {file.type === 'file' && '📄'}
                                    {file.type === 'image' && '🖼️'}
                                    {file.type === 'video' && '🎥'}
                                    {file.type === 'other' && '📁'}
                                </div>
                                <div className={styles.itemSize}>{file.size}</div>
                                <div className={styles.itemType}>
                                    {file.type === 'file' && '文件'}
                                    {file.type === 'image' && '图像'}
                                    {file.type === 'video' && '视频、音频'}
                                    {file.type === 'other' && '其他'}
                                </div>
                                <div className={styles.itemUpdate}>
                                    <div>上次更新</div>
                                    <div>{file.lastUpdate}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </section>
            </main>
            <aside className={styles.contactsSidebar}>
                <div className={styles.contactsHeader}>
                    <h3>联系人</h3>
                    <button className={styles.addContact}>+</button>
                </div>
                <div className={styles.contactsList}>
                    {storageData.contacts.map((contact, index) => (
                        <div key={index} className={styles.contactItem}>
                            <img src={contact.avatar} alt={contact.name} />
                            <div className={styles.contactInfo}>
                                <div className={styles.contactName}>{contact.name}</div>
                                <div className={styles.contactEmail}>{contact.email}</div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className={styles.inviteSection}>
                    <h3>邀请成员</h3>
                    <div className={styles.inviteInput}>
                        <input type="text" placeholder="ABSHHKH51232131" />
                        <button>复制</button>
                    </div>
                    <div className={styles.socialLinks}>
                        {
                            yqimg.map((item, index) => (
                                <img key={index} src={item.src} alt={item.alt} />
                            ))
                        }
                    </div>
                </div>
            </aside>
        </>
    )
}
